<template>
  <div class="table-box table-content">
    <el-form>
      <el-form-item label="请求管理">
        <el-select v-model="formData.requestProcess.id" @change="getValue">
          <el-option v-for="item in request" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="变更管理">
        <el-select v-model="formData.changeProcess.id">
          <el-option v-for="item in change" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题管理">
        <el-select v-model="formData.problemProcess.id">
          <el-option v-for="item in problem" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布管理">
        <el-select v-model="formData.releaseProcess.id">
          <el-option v-for="item in release" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作">
        <el-button type="primary" :icon="CircleCheck" @click="saveProcessOption">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup name="processOption">
import { ref, reactive, onMounted } from "vue";
import { CircleCheck } from "@element-plus/icons-vue";
import { getProcessList, processUseList, setProcessOption } from "@/api/modules/processManagement";
onMounted(() => {
  getProcessListFun();
  getProcessUse();
  console.log(formData);
});
const formData = reactive({
  requestProcess: {
    name: "",
    id: ""
  },
  changeProcess: {
    name: "",
    id: ""
  },
  problemProcess: {
    name: "",
    id: ""
  },
  releaseProcess: {
    name: "",
    id: ""
  }
});
const request = ref<any>([]);
const change = ref<any>([]);
const problem = ref<any>([]);
const release = ref<any>([]);
const getProcessListFun = async () => {
  const params = {
    pageSize: 1000
  };
  const res = await getProcessList(params);
  request.value = [];
  change.value = [];
  problem.value = [];
  release.value = [];
  (res.data as any).forEach(item => {
    if (item.name.includes("request")) {
      request.value.push({
        name: item.name + "(ver:" + item.version + ")",
        id: item.id
      });
    }
    if (item.name.includes("change")) {
      change.value.push({
        name: item.name + "(ver:" + item.version + ")",
        id: item.id
      });
    }
    if (item.name.includes("problem")) {
      problem.value.push({
        name: item.name + "(ver:" + item.version + ")",
        id: item.id
      });
    }
    if (item.name.includes("release")) {
      release.value.push({
        name: item.name + "(ver:" + item.version + ")",
        id: item.id
      });
    }
  });
  request.value.some(item => {
    if (item.id === formData.requestProcess.id) {
      formData.requestProcess.name = item.name;
    }
  });
  change.value.some(item => {
    if (item.id === formData.changeProcess.id) {
      formData.changeProcess.name = item.name;
    }
  });
  problem.value.some(item => {
    if (item.id === formData.problemProcess.id) {
      formData.problemProcess.name = item.name;
    }
  });
  release.value.some(item => {
    if (item.id === formData.releaseProcess.id) {
      formData.releaseProcess.name = item.name;
    }
  });
};
const getProcessUse = async () => {
  const params = {
    "processUseDTO.useName": "processUse"
  };
  const result = await processUseList(params);
  let res = result as any;
  formData.requestProcess.id = res.requestProcessDefinitionId;
  formData.changeProcess.id = res.changeProcessDefinitionId;
  formData.problemProcess.id = res.problemProcessDefinitionId;
  formData.releaseProcess.id = res.releaseProcessDefinitionId;
};
const saveProcessOption = async () => {
  console.log(formData);
  const params = {
    "processUseDTO.useName": "processUse",
    "processUseDTO.requestProcessDefinitionId": formData.requestProcess.id,
    "processUseDTO.changeProcessDefinitionId": formData.changeProcess.id,
    "processUseDTO.problemProcessDefinitionId": formData.problemProcess.id,
    "processUseDTO.releaseProcessDefinitionId": formData.releaseProcess.id
  };
  const res = await setProcessOption(params);
  console.log(res);
};
const getValue = e => {
  console.log(e);
};
</script>
<style scoped>
.table-box {
  padding: 20px;
}
</style>
